<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母校行管理员系统 - 队伍管理</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入共用样式 -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app" class="container">
    <!-- 顶部栏 -->
    <header class="header">
        <div class="header-content">
            <div class="system-title">
                <i class="fa fa-graduation-cap"></i>
                <span>母校行活动管理系统</span>
            </div>
            <div class="user-info">
                <span>CAOYUWEI（招办管理员）</span>
                <a href="../portal.html" class="return-portal">
                    <i class="fa fa-home"></i>
                    <span>返回门户</span>
                </a>
            </div>
        </div>
    </header>

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        <a href="index.html">首页</a>
        <i class="fa fa-angle-right"></i>
        <span>母校行队伍管理</span>
    </div>

    <!-- 主内容区容器 -->
    <div class="main-container">
        <!-- 左侧导航栏 -->
        <aside class="sidebar">
            <nav class="nav-menu">
                <a href="index.html" class="nav-item active">
                    <i class="fa fa-tasks"></i>
                    <span>母校行队伍管理</span>
                </a>
                <a href="summary-review.html" class="nav-item">
                    <i class="fa fa-file-text-o"></i>
                    <span>总结审核</span>
                </a>
                <a href="team-review.html" class="nav-item">
                    <i class="fa fa-check-square-o"></i>
                    <span>队伍审核</span>
                </a>
                <a href="material-status.html" class="nav-item">
                    <i class="fa fa-upload"></i>
                    <span>队伍上传材料情况</span>
                </a>
                <a href="activity-batches.html" class="nav-item">
                    <i class="fa fa-calendar"></i>
                    <span>母校行活动批次</span>
                </a>
            </nav>
        </aside>

        <!-- 右侧内容区域 -->
        <main class="content">
            <div class="content-header">
                <h1>母校行队伍管理</h1>
                <button class="btn btn-add" @click="showAddTeamModal = true">
                    <i class="fa fa-plus"></i>
                    <span>新增队伍</span>
                </button>
            </div>

            <!-- 筛选面板 -->
            <div class="filter-panel">
                <div class="filter-item">
                    <label for="batch">活动批次：</label>
                    <select id="batch" v-model="selectedBatch" class="form-select">
                        <option value="">全部批次</option>
                        <option value="秋季批次">母校行活动秋季批次</option>
                        <option value="春季批次">母校行活动春季批次</option>
                        <option value="夏季批次">母校行活动夏季批次</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label for="college">所属学院：</label>
                    <select id="college" v-model="selectedCollege" class="form-select">
                        <option value="">全部学院</option>
                        <option value="A学院">A学院</option>
                        <option value="B学院">B学院</option>
                        <option value="C学院">C学院</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label for="highSchool">中学名称：</label>
                    <input type="text" id="highSchool" v-model="highSchoolName"
                           placeholder="请输入中学名称" class="form-input">
                </div>
                <div class="filter-item">
                    <label for="teamName">队伍名称：</label>
                    <input type="text" id="teamName" v-model="teamName"
                           placeholder="请输入队伍名称" class="form-input">
                </div>
                <div class="filter-item" style="margin-left: auto;">
                    <button class="btn btn-search" @click="search">
                        <i class="fa fa-search"></i>
                        <span>搜索</span>
                    </button>
                    <button class="btn btn-reset" @click="resetFilter">
                        <i class="fa fa-refresh"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>

            <!-- 表格容器 -->
            <div class="table-container">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>队伍名称</th>
                        <th>中学名称</th>
                        <th>队长姓名</th>
                        <th>母校行批次</th>
                        <th>学院</th>
                        <th>团队人数</th>
                        <th>联系方式</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(team, index) in filteredTeams" :key="team.id">
                        <td>{{ index + 1 + (currentPage - 1) * pageSize }}</td>
                        <td>{{ team.name }}</td>
                        <td>{{ team.highSchool }}</td>
                        <td>{{ team.leaderName }}</td>
                        <td>{{ team.batch }}</td>
                        <td>{{ team.college }}</td>
                        <td>{{ team.memberCount }}</td>
                        <td>{{ team.contact }}</td>
                        <td>{{ team.createTime }}</td>
                        <td>
                            <div class="action-buttons">
                                <!-- 点击查看跳转到队伍详情页，传递队伍ID -->
                                <a :href="`team-detail.html?id=${team.id}`" class="btn btn-view">
                                    <i class="fa fa-eye"></i>
                                    <span>查看</span>
                                </a>
                                <button class="btn btn-more" @click="showMoreOptions(team.id)">
                                    <i class="fa fa-ellipsis-v"></i>
                                    <span>更多</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="filteredTeams.length === 0">
                        <td colspan="10" style="text-align: center; padding: 30px;">
                            <i class="fa fa-search-minus" style="margin-right: 8px;"></i>
                            未找到匹配的队伍数据
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
                    <i class="fa fa-angle-left"></i>
                    <span>上一页</span>
                </button>
                <button v-for="page in totalPages" :key="page" class="page-btn"
                        :class="{ 'active': page === currentPage }" @click="currentPage = page">
                    {{ page }}
                </button>
                <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
                    <span>下一页</span>
                    <i class="fa fa-angle-right"></i>
                </button>
                <span style="margin-left: 15px;">
                        共 {{ totalItems }} 条记录，{{ totalPages }} 页
                    </span>
            </div>
        </main>
    </div>

    <!-- 新增队伍模态框 -->
    <div class="modal" v-if="showAddTeamModal" @click="showAddTeamModal = false">
        <div class="modal-content" @click.stop>
            <div class="modal-header">
                <h3>新增母校行队伍</h3>
                <button class="close-btn" @click="showAddTeamModal = false">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="newTeamName">队伍名称：</label>
                    <input type="text" id="newTeamName" v-model="newTeam.name" class="form-input" placeholder="请输入队伍名称">
                </div>
                <div class="form-group">
                    <label for="newHighSchool">中学名称：</label>
                    <input type="text" id="newHighSchool" v-model="newTeam.highSchool" class="form-input" placeholder="请输入中学名称">
                </div>
                <div class="form-group">
                    <label for="newLeader">队长姓名：</label>
                    <input type="text" id="newLeader" v-model="newTeam.leaderName" class="form-input" placeholder="请输入队长姓名">
                </div>
                <div class="form-group">
                    <label for="newBatch">活动批次：</label>
                    <select id="newBatch" v-model="newTeam.batch" class="form-select">
                        <option value="母校行活动秋季批次">母校行活动秋季批次</option>
                        <option value="母校行活动春季批次">母校行活动春季批次</option>
                        <option value="母校行活动夏季批次">母校行活动夏季批次</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="newCollege">所属学院：</label>
                    <select id="newCollege" v-model="newTeam.college" class="form-select">
                        <option value="A学院">A学院</option>
                        <option value="B学院">B学院</option>
                        <option value="C学院">C学院</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="newContact">联系方式：</label>
                    <input type="text" id="newContact" v-model="newTeam.contact" class="form-input" placeholder="请输入联系电话">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="showAddTeamModal = false">取消</button>
                <button class="btn btn-primary" @click="saveNewTeam">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入交互逻辑 -->
<script src="js/script.js"></script>
</body>
</html>
